<template>
  <div class="about">
    请输入用户名:<input :type="text" :value="rbacManager.username" @input="inputUsername" />
    请输入你的密码:<input type="password" :value="rbacManager.password" @input="inputPassword" /><br>
    {{rbacManager.username}}---{{rbacManager.password}}
    <hr>
    使用v-model绑定用户名:<input type="text" v-model="rbacManager.username" />
    <hr>
    <h1>绑定多行文本</h1>
    <textarea v-model="textarea" cols="30" row="10">s</textarea>
    {{textarea}}
    <hr>
    <h1>绑定复选框</h1>
    <input type="checkbox" v-model="checked"/>
    <label for="checkbox">男{{checked}}</label>
    <input type="checkbox" v-model="checked1"/>
    <label for="checkbox">女{{checked1}} </label>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rbacManager: {
        username: "dafault",
        password: "123456"
      },
      textarea: `
           仁慈的父我已坠入
           看不见罪的过度
           请原谅我的自负
           `,
      checked: false,
      checked1: false
    };
  },
  methods: {
    inputUsername(e) {
      console.log(e.target.value);
      this.rbacManager.username = e.target.value;
    },
    inputPassword(e) {
      this.rbacManager.password = e.target.value;
    }
  }
};
</script>
